<template>
  <div style="padding-left: 2vw;padding-top: 8vw;padding-right: 2vw">
    <div style="text-align:  right;transform: translateY(-1vw)">
      <el-button v-if="this.formMsg.role==1||(this.formMsg.role==2&&this.author.indexOf(this.formMsg.nickName)==0)" @click="textEidt(myData.content)" >修改</el-button>
      <el-popconfirm v-if="this.formMsg.role==1||(this.formMsg.role==2&&this.author.indexOf(this.formMsg.nickName)==0)" title="确定删除吗" @confirm="handDelete(this.$route.query.index)" >
        <template #reference><el-button size="small" >删除</el-button></template>
      </el-popconfirm>
      <router-link :to="'/Webpage4?pageId='+this.$route.query.pageIndex+'&blockId='+this.$route.query.blockId
      +'&page='+this.$route.query.page
      " style="padding-left: 1vw">
        <el-button @click="">返回</el-button>
      </router-link>
    </div>
  <el-divider style="margin-top: 0px"/>
  <div style="text-align: center;transform: translateY(-1vw)">
    <div><span style="font-size: 2.5vw">{{myData.title}}</span></div>
    <div><span style="font-size: 1.5vw">{{myData.author}}</span></div>
    <div><span style="font-size: 1.5vw">{{myData.date}}</span></div>
  </div>
    <el-card > <div v-html="myData.content"/> </el-card>
  </div>
  <el-dialog title="提示" v-model="dialogVisible" width="50%">
    <el-form :model="form" label-width="10vw">
      <el-form-item label="标题">
        <el-input v-model="form.title" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-if="this.formMsg.role==1" v-model="form.author" style="width: 80%"></el-input>
        <el-input v-if="this.formMsg.role==2" v-model="form.author" :model-value="this.formMsg.nickName" readonly:true  style="width: 80%;"></el-input>
      </el-form-item>
      <el-form-item label="封面">
        <el-upload
            ref="upload"
            action="http://localhost:9084/files/upload"
            :on-success="filesUploadSuccess"
            :limit="1"
        >
<!--        <el-upload -->
<!--            ref="cover"-->
<!--            action="http://localhost:9090/files/cover"-->
<!--            :on-success="filesUploadSuccess"-->
<!--        >-->
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div >
              jpg/png files with a size less than 10MB.
            </div>
          </template>
        </el-upload>
      </el-form-item>
      <div id="div1"></div>
    </el-form>
    <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </template>
  </el-dialog>

</template>

<script>
import E from 'wangeditor'
import request from "@/utils/request";
import WebPage4 from "@/views/WebPage4";
let editor;
export default {
  name: "WebPage4_1",
  data(){
    return {
      myData:{},
      form:{},
      author:"",
      formMsg:{},
      input_title:"",
      inputAuthor:"",
      dialogVisible:false,
    }
  },
  created() {
    let str=sessionStorage.getItem("user")||"{}"
    this.formMsg=JSON.parse(str);
    request.get("/user/"+this.formMsg.id).then(res=>{
      if(res.code==='0'){
        this.formMsg=res.data;
      }
    })
    this.load(this.$route.query.index);
  },
  components:{
    WebPage4,
  },
  methods:{
    textEidt(content){
      this.dialogVisible=true;
      this.$nextTick(()=>{
        editor=new E('#div1');
        editor.config.uploadImgServer='http://localhost:9084/files/editor/upload';
        editor.config.uploadFileName="file";
        editor.create();
        editor.txt.html(content);
      }
      )
    },
    load(id){
      request.get("/webpage4/pageId="+id, {}).then(res => {
        console.log(res);
        this.myData = res;
        this.author=res.author;
        this.form=res;
      })
    },
    save(){
      this.form.content=editor.txt.html();
      request.put("/webpage4", this.form).then(res=>{
        console.log(res);
          if(res.code=='0'){
            this.$message({
              type:"success",
              message:"修改成功"
            })
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      this.dialogVisible=false;
    },
    handDelete(id){
      console.log(id);
      request.delete("/webpage4/"+id).then(res=>{
        if(res.code=='0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else{
          this.$message({
            type:"error",
            message:res.msg
          })
        }
      })
      this.$router.push('/WebPage4?pageId='+this.$route.query.pageIndex+'&blockId='
      +this.$route.query.blockId+'&page='+this.$route.query.page);

    },
    filesUploadSuccess(res){
      this.form.url=res.data;
      console.log(res);
    },
  }
}
</script>

<style scoped>

</style>